{% extends 'pages/_base.html' %}

{% from 'tools/img.html' import Img %}

{% macro Line() %}
    {% set colors = ["primary", "secondary", "info", "success", "warning", "danger", "light", "dark", "purple", "pink", "teal", "orange"] %}
    {% set color = colors | random %}
    <div class="callout callout-{{ color }}" ondblclick="makeEditable(this)">
        <span class="editable-content">加载中...</span>
    </div>

    <script>
        Event(document,"DOMContentLoaded",async (event) => {
            const data = await fetchGet("{{ url_for('api.get_personal_Intro') }}");
            const contentElement = document.querySelector(".editable-content");
            if (data && data.title) {
                contentElement.innerText = data.title;
            }
        })

    </script>

    <script>
    function makeEditable(calloutDiv) {
        const content = calloutDiv.querySelector('.editable-content');
        content.setAttribute('contenteditable', 'true');
        content.style.border = '2px solid #007bff';
        content.style.padding = '5px';
        content.style.width = 'calc(100% - 10px)';
        content.style.height = 'calc(100% - 10px)';
        content.style.display = 'block';
        content.style.outline = 'none';
        content.style.whiteSpace = 'pre-wrap';
        content.focus();


        function saveEdit() {
            content.removeAttribute('contenteditable');
            content.style.border = 'none';
            fetchPost('{{ url_for('api.put_personal_Intro') }}', { title: content.innerHTML }).then((json)=>{
                flash(json.msg)
            })
        }

        Event(content, 'blur', saveEdit);
        Event(content, 'keydown', function(event) {
            if (event.key === 'Enter') {
                saveEdit();
                content.blur();
            }
        });
    }
    </script>
{% endmacro %}


{% macro Image() %}
    <div class="image-container">
        <img id="img" src="#" alt="个人背景" class="preview-image" style="cursor: pointer;" ondblclick="previewImage(this)">
    </div>

    <div id="image-modal" class="image-modal" onclick="closePreview()">
        <img id="modal-image" class="modal-content">
    </div>

    <style>
        .image-container {
            width: 100%;  /* 使容器宽度为父容器的 100% */
            height: 0;
            padding-top: 100%; /* 高度等于宽度，保持容器为正方形 */
            position: relative;
            border: 2px solid #007bff; /* 添加边框 */
            overflow: hidden; /* 防止图片溢出 */
            background-color: #f0f0f0; /* 背景颜色 */
        }

        .preview-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* 图片覆盖容器，按比例裁剪 */
        }

        .image-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            max-width: 90%;
            max-height: 90%;
            display: block;
            margin: auto;
            border-radius: 8px;
        }
    </style>

    <script>
        fetchGet("{{ url_for('api.get_personal_PersonalImg') }}").then((json)=>
        {
           if(json.image){
               document.getElementById("img").src = json.image;
           }
        })

        function previewImage(img) {
            const modal = document.getElementById('image-modal');
            const modalImg = document.getElementById('modal-image');
            modal.style.display = 'flex';
            modalImg.src = img.src;
        }

        function closePreview() {
            document.getElementById('image-modal').style.display = 'none';
        }
    </script>
{% endmacro %}






{% block _base %}
{% from 'tools/card.html' import nonModal %}

<style>
        .profile-background {
            width: 100%;
            height: 250px;
            background-size: cover;
            background-position: center;
            position: relative;
            border: 5px solid #ddd;
            border-radius: 10px;
        }
        .upload-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .profile-info {
            text-align: center;
            margin-top: -50px;
        }
        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid #ddd;
            object-fit: cover;
        }
    </style>



      <h2 class="text-center">主内容</h2>

        {{ Img(1) }}

        <div class="wrapper">
        <div class="profile-background">
            <button class="upload-btn">更换背景</button>
        </div>
        <div class="profile-info">
            <img src="" alt="头像" class="profile-avatar" id="img1">
            <h3>: )</h3>
            <p>22岁 | 摩羯座 | 湖北·武汉</p>
            <button class="btn btn-primary">编辑资料</button>
        </div>
    </div>

      <button type="button" class="btn btn-success" id="uploadButton">
        <i class="fas fa-upload"></i> 上传
      </button>

      <div class="row col-md-12">
        <div class="col-md-6">
          {{ nonModal(collapse=false, head='<h4>个人简介</h4>', body=Line()) }}
        </div>
        <div class="col-md-6">
          {{ nonModal(collapse=false, head='<h4>个人背景</h4>', body=Image()) }}
        </div>
      </div>

    <!-- 可拖拽的悬浮卡片 -->
    <div id="floatingCard" class="floating-card card shadow-lg">
      <div id="cardHeader" class="card-header bg-primary text-white" style="cursor: grab;">
        <h5 class="mb-0">快捷操作</h5>
      </div>
      <div class="card-body">
        <p>这里可以放一些快捷按钮或信息。</p>
        <button class="btn btn-sm btn-info"><i class="fas fa-info-circle"></i> 详情</button>
      </div>
    </div>


  <style>
    .floating-card {
      position: fixed;
      right: 5%;
      top: 50%;
      transform: translateY(-50%);
      width: 250px;
      background-color: white;
      border-radius: 10px;
      z-index: 1050;
    }
  </style>

  <script>
      fetchGet("{{ url_for('api.get_personal_PersonalImg') }}").then((json)=>{
                    if(json.image){
               document.getElementById("img1").src = json.image;
           }
      })
    // 悬浮卡片拖动功能
    function makeDraggable(card, header) {
        let offsetX = 0, offsetY = 0, mouseX = 0, mouseY = 0;
        let isDragging = false;

        header.addEventListener("mousedown", (e) => {
            isDragging = true;
            mouseX = e.clientX;
            mouseY = e.clientY;
            offsetX = card.offsetLeft;
            offsetY = card.offsetTop;
            card.style.zIndex = "9999"; // 拖动时始终保持在最上层
            header.style.cursor = "grabbing";
        });

        document.addEventListener("mousemove", (e) => {
            if (!isDragging) return;
            let dx = e.clientX - mouseX;
            let dy = e.clientY - mouseY;
            card.style.left = `${offsetX + dx}px`;
            card.style.top = `${offsetY + dy}px`;
            card.style.transform = "none"; // 取消初始的居中偏移
        });

        document.addEventListener("mouseup", () => {
            isDragging = false;
            header.style.cursor = "grab";
        });
    }

    // 绑定拖拽功能
    const floatingCard = document.getElementById("floatingCard");
    const cardHeader = document.getElementById("cardHeader");
    makeDraggable(floatingCard, cardHeader);
  </script>




{% endblock %}
